<template>
  <el-dialog title="" :visible.sync="dialogVisible" fullscreen :show-close="false">
    <div class="dialog-back" @click="dialogVisible=false">
      <i class="el-icon-arrow-left"></i>
      返回
    </div>
    <!-- 基础信息 -->
    <el-form ref="form" inline label-suffix=":"  onsubmit="return false">
      <el-row :gutter="20">
        <el-col :span="20">
        <el-form-item label="兑换码名称" style="margin-bottom: 0px !important;">
            {{ detailObj.name }}
          </el-form-item>
          <el-form-item label="兑换码有效期" label-width="150px" style="margin-bottom: 0px !important;">
            {{ detailObj.validity_begin }} - {{ detailObj.validity_end}}
          </el-form-item>
          <el-form-item label="使用限制" label-width="150px" style="margin-bottom: 0px !important;">
            {{ detailObj.sg_user_limit?detailObj.sg_user_limit+'次/人':'无限制使用' }}
          </el-form-item>
          <el-form-item label="兑换码类型" label-width="150px" style="margin-bottom: 0px !important;">
            {{ exchangeCodeTypeOptions.get(detailObj.code_cat) && exchangeCodeTypeOptions.get(detailObj.code_cat).desc }}
          </el-form-item>
          <div>
            <el-form-item label="兑换内容" >
              {{detailObj.rel_resource|productNameFilter}}
            </el-form-item>
            <el-form-item label="兑换权益" label-width="150px">
                {{detailObj.rel_resource|prdoctRightFilter}}
              </el-form-item>
          </div>
        </el-col>
        <el-col :span="4" class="tar">
          <el-button type="primary" size="medium" @click="onExport">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据列表 -->
    <el-table :data="tableData" border style="width: 100%" >
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户注册时间" min-width="180px">
        <template slot-scope="scope">
          {{scope.row.reg_at || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="兑换时间" min-width="180px">
        <template slot-scope="scope">
          {{scope.row.exchange_time || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="兑换码" prop="real_code" min-width="180px"></el-table-column>
      <el-table-column label="状态" prop="code" width="180px">
        <template slot-scope="scope">
          <span>{{scope.row.status|formatStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        width="150"
        fixed="right"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            :disabled="scope.row.status!==1"
            @click="handleRefund(scope.row)">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页条-->
    <pagination :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.page_size" @pagination="getList" />
  </el-dialog>
</template>
<script>
import { downloadExportUrl } from '@/utils'
import { exchangeCodeExchList, exportExchangeCode, refundCode } from '@/api/exchange-code'
import { getExchangeCodeType, getMemberValidTime } from '@/constants/constant'
export default {
  name: 'ExchangeCodeDetail',
  props: {
    visible: Boolean,
    detailObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      total: 0,
      tableData: [],
      queryParams: {
        page: 1,
        page_size: 10
      },
      exchangeCodeTypeOptions: undefined
    }
  },
  filters: {
    productNameFilter (val) {
      const item = val?.[0] || {}
      if (item.type === 3) return '加购包'
      return item.name || '--'
      // const arr = []
      // for (const item of val) {
      //   if (item.type === 1 || item.type === 2 || item.type === 3) arr.push(item.name)
      // }
      // return arr.join('，') || '--'
    },
    prdoctRightFilter (val) {
      const item = val?.[0] || {}
      let param = item?.param || '{}'
      try {
        param = JSON.parse(param)
      } catch (error) {
        console.log(error)
      }
      if (item.type === 3) return param.name
      const duration = param.duration || 0
      const target = [...getMemberValidTime()].find(v => v[0] === duration)
      return target ? target[1] : '--'
      // return extText(param.duration, param.unlimited)
    },
    formatStatus (status) {
      const arr = ['未使用', '已使用', '已注销']
      return arr[status]
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.tableData = []
        this.total = 0
        this.queryParams.page = 1
        this.getList()
      }
    }
  },
  created () {
    this.exchangeCodeTypeOptions = getExchangeCodeType()
  },
  methods: {
    /**
     * 列表请求
     */
    getList () {
      var param = {
        page: this.queryParams.page,
        id: this.detailObj.id,
        page_size: this.queryParams.page_size
      }
      exchangeCodeExchList(param).then(res => {
        const data = res.data || {}
        this.tableData = data.list
        this.total = data.count
      })
    },
    /**
     * 导出
     */
    onExport () {
      var param = {
        id: this.detailObj.id
      }
      exportExchangeCode(param).then(res => {
        downloadExportUrl(res.data.url)
      })
    },
    /**
     * 注销
     */
    handleRefund (row) {
      this.$confirm(`是否注销--${row.real_code}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          code: row.code
        }
        refundCode(params).then(() => {
          this.$message({
            type: 'success',
            message: '注销成功!'
          })
          row.status = 2
        })
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.dialog-back{
  position: absolute;
  top: 20px;
  cursor: pointer;
  &:hover{
    color: #409EFF;
  }
}
.tar{
  text-align: right;
}
</style>
